import React,{useState} from 'react'
import './ly.css'
import { Divider, Table,Modal,Button  } from 'antd';
import { render } from '@testing-library/react';

export default function LY() {
  const data = [
    {
      key: '1',
      name: <div className='name'><img src={require("../../../static/images/ly1.png")} alt="" /><span>国贸一期B座</span></div>,
      address: '北京朝阳区建国门外大街1号国贸商城',
      actions:<div><img src={require("../../../static/images/编辑按钮.png")} style={{width:'14.2px',height:'14.2px',}} alt="" /><img src={require("../../../static/images/删除按钮.png")} style={{width:'14.2px',height:'14.2px'}} alt="" /></div>
    },
    {
      key: '2',
      name: <div className='name'><img src={require("../../../static/images/ly1.png")} alt="" /><span>国贸商城二期A座</span></div>,
      address: '北京朝阳区建国门外大街1号国贸商城',
      actions:<div><img src={require("../../../static/images/编辑按钮.png")} style={{width:'14.2px',height:'14.2px',}} alt="" /><img src={require("../../../static/images/删除按钮.png")} style={{width:'14.2px',height:'14.2px'}} alt="" /></div>
    },
    {
      key: '3',
      name: <div className='name'><img src={require("../../../static/images/ly1.png")} alt="" /><span>国贸一期B座</span></div>,
      address: '北京朝阳区建国门外大街1号国贸商城',
      actions:<div><img src={require("../../../static/images/编辑按钮.png")} style={{width:'14.2px',height:'14.2px',}} alt="" /><img src={require("../../../static/images/删除按钮.png")} style={{width:'14.2px',height:'14.2px'}} alt="" /></div>
    },
    {
      key: '4',
      name: <div className='name'><img src={require("../../../static/images/ly1.png")} alt="" /><span>国贸一期B座</span></div>,
      address: '北京朝阳区建国门外大街1号国贸商城',
      actions:<div><img src={require("../../../static/images/编辑按钮.png")} style={{width:'14.2px',height:'14.2px',}} alt="" /><img src={require("../../../static/images/删除按钮.png")} style={{width:'14.2px',height:'14.2px'}} alt="" /></div>
    },
    {
      key: '5',
      name: <div className='name'><img src={require("../../../static/images/ly1.png")} alt="" /><span>国贸商城二期A座</span></div>,
      address: '北京朝阳区建国门外大街1号国贸商城',
      actions:<div><img src={require("../../../static/images/编辑按钮.png")} style={{width:'14.2px',height:'14.2px',}} alt="" /><img src={require("../../../static/images/删除按钮.png")} style={{width:'14.2px',height:'14.2px'}} alt="" /></div>
    }
  ];
  let [arr,setArr] = useState(data);
  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
      className:'col1'
    },
    {
      title: '详细地址',
      dataIndex: 'address',
      className:'col2'
  
    },
    {
      title: '操作',
      dataIndex: 'actions',
      className:'col1',
      render(_,record){
        // console.log(record.key);
        return <div style={{width:'221px',display:'flex',justifyContent:'center'}}>
          <span style={{marginRight:'20px',cursor:'pointer'}}>编辑</span>
          <span style={{cursor:'pointer'}} onClick={showModal}>删除</span>
        </div>
      }
    },
  ];
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
    // let index = arr.indexOf(record);
    // arr.splice(index,1)
    // console.log(index);
    // setArr([...arr])
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  return (
    <>
    <div>
      <button className='btn'>新建楼宇</button>
      <div className='search'>
        <input type="text" placeholder='请输入楼宇名称' />
        <button className='btn'>查询</button>
        <button className='btn2'>重置</button>
      </div>
      <div className='table'>
        <div>
          <Table style={{marginLeft:'-20px',marginTop:'-20px'}} columns={columns} dataSource={data} align='center'/>
        </div>
      </div>
    </div>
      <div className='kong'></div>
      <Modal 
        style={{ width:'308px',height:'160px',display:'flex',justifyContent:'center'}} 
        open={isModalOpen} 
        onOk={handleOk} 
        onCancel={handleCancel}
        okText='确定'
        footer={null}
      >
        <p style={{textAlign:'center',fontWeight:'bold'}}>此操作是不可恢复的！</p>
        <p style={{textAlign:'center',fontWeight:'bold',margin:'10px 0 20px 0'}}>您确认要执行此删除操作吗?</p>
        <div style={{width:'260px',display:'flex',justifyContent:'space-between'}}>
          <Button style={{width:'120px',background:'#8479E3',color:'#fff' }} onClick={handleOk}>确定</Button>
          <Button style={{width:'120px',background:'#F0F1F9',color:'#666'}} onClick={handleCancel}>取消</Button>
        </div>
      </Modal>
    </>
  )
}
